<template>
  <div class="reports">
    <BreadCrumb :item="['数据统计', '数据报表']"></BreadCrumb>
    <el-card>
      <div id="echartBox" ref="echartBox"></div>
    </el-card>
  </div>
</template>

<script>
import echarts from '@/utils/echarts'
import { getEcharts } from '@/api/reports'
export default {
  data() {
    return {
      // echartsInfo: {},
    }
  },
  methods: {
    async initEcharts() {
      const res = await getEcharts()
      // console.log(res)
      const echartsInfo = res.data
      console.log(echartsInfo)
      const myChart = echarts.init(this.$refs.echartBox)
      const option = {
        title: {
          text: '用户来源',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
          data: echartsInfo.legend.data,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: echartsInfo.xAxis[0].data,
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: echartsInfo.series,
      }

      option && myChart.setOption(option)
    },
  },
  created() {
    this.initEcharts()
  },
  // mounted() {
  //   const myChart = echarts.init(this.$refs.echartBox)
  //   const option = {
  //     title: {
  //       text: '用户来源',
  //     },
  //     tooltip: {
  //       trigger: 'axis',
  //       axisPointer: {
  //         type: 'cross',
  //         label: {
  //           backgroundColor: '#6a7985',
  //         },
  //       },
  //     },
  //     legend: {
  //       // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
  //       data: this.echartsInfo.legend.data,
  //     },
  //     grid: {
  //       left: '3%',
  //       right: '4%',
  //       bottom: '3%',
  //       containLabel: true,
  //     },
  //     xAxis: [
  //       {
  //         type: 'category',
  //         boundaryGap: false,
  //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  //       },
  //     ],
  //     yAxis: [
  //       {
  //         type: 'value',
  //       },
  //     ],
  //     series: [
  //       {
  //         name: 'Email',
  //         type: 'line',
  //         stack: 'Total',
  //         areaStyle: {},
  //         emphasis: {
  //           focus: 'series',
  //         },
  //         data: [120, 132, 101, 134, 90, 230, 210],
  //       },
  //       {
  //         name: 'Union Ads',
  //         type: 'line',
  //         stack: 'Total',
  //         areaStyle: {},
  //         emphasis: {
  //           focus: 'series',
  //         },
  //         data: [220, 182, 191, 234, 290, 330, 310],
  //       },
  //       {
  //         name: 'Video Ads',
  //         type: 'line',
  //         stack: 'Total',
  //         areaStyle: {},
  //         emphasis: {
  //           focus: 'series',
  //         },
  //         data: [150, 232, 201, 154, 190, 330, 410],
  //       },
  //       {
  //         name: 'Direct',
  //         type: 'line',
  //         stack: 'Total',
  //         areaStyle: {},
  //         emphasis: {
  //           focus: 'series',
  //         },
  //         data: [320, 332, 301, 334, 390, 330, 320],
  //       },
  //       {
  //         name: 'Search Engine',
  //         type: 'line',
  //         stack: 'Total',
  //         label: {
  //           show: true,
  //           position: 'top',
  //         },
  //         areaStyle: {},
  //         emphasis: {
  //           focus: 'series',
  //         },
  //         data: [820, 932, 901, 934, 1290, 1330, 1320],
  //       },
  //     ],
  //   }

  //   option && myChart.setOption(option)
  // },
}
</script>

<style>
#echartBox {
  width: 750px;
  height: 400px;
}
</style>
